<template>
    <div class="groupTable">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item :to="{ path: '/transactionCommissionTable' }">交易佣金</el-breadcrumb-item>
            <el-breadcrumb-item>{{tables[currentTable]}}</el-breadcrumb-item>
        </el-breadcrumb>

        <el-button v-for="(item,index) in tables" :type="currentTable=== index ? 'primary' : ''" :key="index" @click="changeTable(index)">
            {{item}}
        </el-button>
        <h3>{{currentMonth.split('-').join("年")}}月份好生活{{tables[currentTable].slice(0,2)+"调剂"+
            tables[currentTable].slice(2)}}</h3>
        <div>
            受益人姓名：
            <el-input class="w200 mr20" size="mini" placeholder="请输入姓名" v-model="searchName"></el-input>
            <el-button type="primary" size="mini" @click="getData" id="monitorEnter">查询</el-button>
            <el-button type="primary" size="mini" @click="exportGroupReport">导出</el-button>
        </div>
        <div v-if="currentTable === 0">
            <el-table
                    :data="assignTableData.data"
                    class="mt20"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="serialNum"
                        label="序号"
                        align="center"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="devName"
                        align="center"
                        label="项目">
                    <template slot-scope="scope">{{scope.row.devName || '——'}}</template>
                </el-table-column>

                <el-table-column
                        v-for="(item,index) in assignTableData.lineStaffs"
                        :key="index"
                        :prop="item.props"
                        align="center"
                        :label="item.label">
                    <template slot-scope="scope">{{scope.row[item.props] || '——'}}</template>
                </el-table-column>
                <el-table-column
                        prop="checkResult"
                        align="center"
                        v-if="isShowUpdate"
                        label="激励目标考核结果">
                    <template slot-scope="scope">
                        <el-input :disabled="isDisabledUpdate" v-if="scope.row.devId" v-model="scope.row.checkResult" @focus="showDialog(scope.row, 1)" size="mini"></el-input>
                        <span v-else>——</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="totalAmount"
                        align="center"
                        label="总额(元)">
                </el-table-column>
                <el-table-column
                        prop="amount"
                        align="center"
                        v-if="isShowUpdate"
                        label="本次激励部分(元)">
                    <template slot-scope="scope">
                        <el-input :disabled="isDisabledUpdate" v-if="scope.row.devId" v-model="scope.row.amount" @focus="showDialog(scope.row, 2)" size="mini"></el-input>
                        <span v-else>{{scope.row.amount}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="remainingAmount"
                        v-if="isShowUpdate"
                        align="center"
                        label="调剂佣金预留(元)">
                    <template slot-scope="scope">
                        <el-input :disabled="isDisabledUpdate" v-if="scope.row.devId" v-model="scope.row.remainingAmount" @focus="showDialog(scope.row, 3)" size="mini"></el-input>
                        <span v-else>{{scope.row.remainingAmount}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-else>
            <el-table
                    :data="grantTableData"
                    class="mt20"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="serialNum"
                        :key="Math.random()"
                        align="center"
                        label="序号"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="staffName"
                        :key="Math.random()"
                        align="center"
                        label="受益人姓名">
                    <template slot-scope="scope">{{scope.row.staffName || '——'}}</template>
                </el-table-column>
                <el-table-column
                        prop="departmentName"
                        :key="Math.random()"
                        align="center"
                        label="部门">
                    <template slot-scope="scope">{{scope.row.departmentName || '——'}}</template>
                </el-table-column>
                <el-table-column
                        prop="stationName"
                        :key="Math.random()"
                        align="center"
                        label="工作岗位">
                    <template slot-scope="scope">{{scope.row.stationName || '——'}}</template>
                </el-table-column>
                <el-table-column
                        prop="staffCommission"
                        :key="Math.random()"
                        v-if="isShowUpdate"
                        align="center"
                        label="个人分配明细(元)">
                    <template slot-scope="scope">
                        <el-input :disabled="isDisabledUpdate" v-if="scope.row.id" v-model="scope.row.staffCommission" @focus="showDialog(scope.row, 4)" size="mini"></el-input>
                        <span v-else>{{scope.row.staffCommission}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="pagebar">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next"
                    :current-page.sync="tableConfig.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="tableConfig.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="tableConfig.totalSize">
            </el-pagination>
        </div>

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="90%">
            <div>
                <div v-if="currentTable === 0">
                    <el-table
                            :data="dialogData"
                            class="mt20"
                            border
                            style="width: 100%">
                        <el-table-column
                                prop="serialNum"
                                label="序号"
                                align="center"
                                width="50">
                        </el-table-column>
                        <el-table-column
                                prop="devName"
                                align="center"
                                label="项目">
                            <template slot-scope="scope">{{scope.row.devName || '——'}}</template>
                        </el-table-column>

                        <el-table-column
                                v-for="(item,index) in assignTableData.lineStaffs"
                                :key="index"
                                :prop="item.props"
                                align="center"
                                :label="item.label">
                            <template slot-scope="scope">{{scope.row[item.props] || '——'}}</template>
                        </el-table-column>
                        <el-table-column
                                prop="checkResult"
                                align="center"
                                label="激励目标考核结果">
                            <template slot-scope="scope">
                                <el-input v-if="scope.row.devId" ref="input1" @input="replaceMoney(scope.row.checkResult, scope.$index, 'checkResult')" v-model="scope.row.checkResult" size="mini"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="totalAmount"
                                align="center"
                                label="总额(元)">
                        </el-table-column>

                        <el-table-column
                                prop="amount"
                                align="center"
                                label="本次激励部分(元)">
                            <template slot-scope="scope">
                                <el-input v-if="scope.row.devId" ref="input2" @input="replaceMoney(scope.row.amount, scope.$index, 'amount')" v-model="scope.row.amount" size="mini"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="remainingAmount"
                                align="center"
                                label="调剂佣金预留(元)">
                            <template slot-scope="scope">
                                <el-input v-if="scope.row.devId" ref="input3" @input="replaceMoney(scope.row.remainingAmount, scope.$index, 'remainingAmount')" v-model="scope.row.remainingAmount" size="mini"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div v-else>
                    <el-table
                            :data="dialogData"
                            class="mt20"
                            border
                            style="width: 100%">
                        <el-table-column
                                prop="serialNum"
                                :key="Math.random()"
                                align="center"
                                label="序号"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="staffName"
                                :key="Math.random()"
                                align="center"
                                label="受益人姓名">
                            <template slot-scope="scope">{{scope.row.staffName || '——'}}</template>
                        </el-table-column>
                        <el-table-column
                                prop="departmentName"
                                :key="Math.random()"
                                align="center"
                                label="部门">
                            <template slot-scope="scope">{{scope.row.departmentName || '——'}}</template>
                        </el-table-column>
                        <el-table-column
                                prop="stationName"
                                :key="Math.random()"
                                align="center"
                                label="工作岗位">
                            <template slot-scope="scope">{{scope.row.stationName || '——'}}</template>
                        </el-table-column>
                        <el-table-column
                                prop="staffCommission"
                                :key="Math.random()"
                                align="center"
                                label="个人分配明细(元)">
                            <template slot-scope="scope">
                                <el-input v-if="scope.row.id" ref="input4" @input="replaceMoney(scope.row.staffCommission, scope.$index, 'staffCommission')" v-model="scope.row.staffCommission" size="mini"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    import api from '@/api/apiPath'

    export default {
        name: 'groupTable',
        data() {
            return {
                currentTable: 0,
                tables: [
                    "总部渠道佣金分配明细表",
                    "总部渠道佣金发放明细表"
                ],
                tableConfig: {
                    pageNum: 1,
                    pageSize: 10,
                    totalSize: 10
                },
                currentMonth: "",
                searchName: "",
                assignTableData: {
                    lineStaffs: []
                },
                grantTableData: [],
                isShowUpdate: false,
                isDisabledUpdate: true,
                dialogVisible: false,
                dialogData: [],
                settlement: false
            }
        },
        created() {
            this.currentMonth = this.$route.query.month;
            this.settlement = this.$route.query.settlement  === 0 ? false : true;
            this.getIsUpdateTable();
            this.getData();
        },
        mounted() {

        },
        methods: {
            replaceNum(value) {
                value = value.replace(/[^\d.]/g, '');
                value = value.replace(/\.{2,}/g, ".");
                value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
                if (value.indexOf('.') < 0 && value != '') {
                    value = parseInt(value);
                }
                return value
            },
            replaceMoney(value, index, field) {
                value = this.replaceNum(value);
                setTimeout(() => {
                    // 总部渠道佣金分配明细表 - 本次激励部分 amount
                    // 总部渠道佣金分配明细表 - 调剂佣金预留 remainingAmount
                    // 总部渠道佣金发放明细表 - 个人分配明细 staffCommission
                    this.$set(this.dialogData[index], field, value)
                }, 30)
            },
            beforeCloseDialog() {
                console.log(1);
            },
            changeTable(index) {
                this.currentTable = index;
                this.searchName = "";
                this.tableConfig.pageNum = 1;
                this.tableConfig.pageSize = 10;
                this.getData()
            },
            getData() {
                if (this.currentTable === 0) {
                    this.getAssignTableList();
                } else {
                    this.getGrantTableList()
                }
            },
            getAssignTableList() {
                this.axios.post(api.getGroupTableList0, {
                    "month": this.currentMonth,
                    "pageNum": this.tableConfig.pageNum,
                    "pageSize": this.tableConfig.pageSize,
                    "searchName": this.searchName
                }).then((res) => {
                    this.assignTableData = res.data.data;
                    console.log(this.assignTableData);
                })
            },
            getGrantTableList() {
                this.axios.post(api.getGroupTableList1, {
                    "month": this.currentMonth,
                    "pageNum": this.tableConfig.pageNum,
                    "pageSize": this.tableConfig.pageSize,
                    "searchName": this.searchName
                }).then((res) => {
                    this.grantTableData = res.data.data.list
                    console.log(this.grantTableData);
                    this.tableConfig.totalSize = res.data.data.total;
                })
            },
            handleSizeChange(size) {
                this.tableConfig.pageSize = size
                this.getData()
            },
            handleCurrentChange(page) {
                this.tableConfig.pageNum = page
                this.getData()
            },
            getIsUpdateTable() {
                this.axios.post(api.getIsUpdateTable, {
                    month: this.currentMonth
                }).then((res) => {
                    this.isShowUpdate = !!res.data.data.showFlag;
                    if(!this.settlement) {
                        this.isDisabledUpdate = !res.data.data.canAdjust
                    }else {
                        this.isDisabledUpdate = false;
                    }
                    
                })
            },
            showDialog(row, index) {
                this.dialogVisible = true;
                this.dialogData = [{...row}]
                setTimeout(() => {
                    this.$refs['input' + index].focus();
                }, 30)
            },
            save() {
                if (this.currentTable === 0) {
                    this.axios.post(api.updateGroupTable0, {
                        id: this.dialogData[0].id,
                        checkResult: this.dialogData[0].checkResult,
                        amount: this.dialogData[0].amount,
                        remainingAmount: this.dialogData[0].remainingAmount,
                    }).then((res) => {
                        this.dialogVisible = false;
                        this.getData()
                    })
                } else {
                    this.axios.post(api.updateGroupTable1, {
                        id: this.dialogData[0].id,
                        staffCommission: this.dialogData[0].staffCommission
                    }).then((res) => {
                        this.dialogVisible = false;
                        this.getData()
                    })
                }
            },
            exportGroupReport() {
                this.axios.post(api['exportGroupReport' + this.currentTable], {
                    month: this.currentMonth
                }).then((res) => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: '已导出，请前往报表查询下载',
                            type: 'success'
                        });
                    }
                })
            },
        },
        components: {},
        computed: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">

</style>

